<template>
	<div class="resaleAudiList content-wrap">
		<div class="content-top-box">
			<!-- 搜索区域 -->
			<ul class="search-container">
				<li>
					<span class="search-item-name">添加标的时间：</span>
					<el-date-picker v-model="payDate" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" @change="changePayDate">
					</el-date-picker>
				</li>
				<li>
					<span class="search-item-name">名称：</span>
					<el-select v-model="name" placeholder="请选择" clearable @change="changeNameType">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</li>
				<li>
					<el-button class="search-btn" type="primary" icon="el-icon-search" @click="searchFn" v-if="searchBtn">查询</el-button>
					<el-button class="search-btn" type="primary" icon="el-icon-plus" @click="addFun" v-if="addBtn">新增</el-button>
				</li>
			</ul>
		</div>

		<div class="content-bottom-box">
			<!-- 表格 -->
			<div class="content-form-box">
				<el-table v-loading="loadingFlag" :data="tableData" :height="tableHeight" ref="table" border stripe style="width: 100%">
					<el-table-column prop="serialNumber" label="序号" width="50" fixed>
					</el-table-column>
					<el-table-column prop="productName" label="名称" width="180" fixed>
					</el-table-column>
					<el-table-column prop="packing" label="包装方式" width="120">
					</el-table-column>
					<el-table-column prop="levelAll" label="木耳等级">
					</el-table-column>
					<el-table-column prop="minOrderQuantity" label="最低起购" width="140">
					</el-table-column>
					<el-table-column prop="originCity" label="产地" width="120">
					</el-table-column>
					<el-table-column prop="smallPic" label="木耳图片" width="120">
						<template slot-scope="scope">
							<el-button @click="checkImgFn(scope.row.smallPic)" type="text" size="small">【查看】</el-button>
						</template>
					</el-table-column>
					<!--<el-table-column prop="largePic" label="木耳介绍图片" width="160">
						<template slot-scope="scope">
							<el-button @click="checkImgFn(scope.row.largePic)" type="text" size="small">【查看】</el-button>
						</template>
					</el-table-column>-->
					<el-table-column prop="createTime" label="添加项目时间  " width="180">
					</el-table-column>
					<el-table-column label="操作" width="120" fixed="right" class-name="ccc">
						<template slot-scope="scope">
							<!--<el-button @click="showDialog(scope.row)" type="text" size="small">重新上架</el-button>-->
							<el-button @click="editRow(scope.row)" type="text" size="small" v-if="scope.row.isOff == 1 && editBtn">编辑</el-button>
							<el-button @click="editRow(scope.row)" type="text" size="small" disabled v-else-if="scope.row.isOff !== 1 && editBtn">编辑</el-button>
							<el-button @click="checkResaleInfoFn(scope.row)" type="text" size="small" v-if="scope.row.isOff == 1 && closeBtn">关闭</el-button>
							<el-button type="text" size="small" disabled v-else>已关闭</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<!-- 页码 -->
			<div class="content-Page-container">
				<BaseFormPage :pagination="pagination" @cFirstPageFn="cFirstPageFn" @cLastPageFn="cLastPageFn" @cJumpPageFn="cJumpPageFn" @cPreFn="cPreFn" @cNextFn="cNextFn" @cRefreshFn="cRefreshFn">
				</BaseFormPage>
			</div>

			<!-- 查看图片 -->
			<el-dialog title="查看图片" :visible.sync="imgDialogFlag" center class="banner-check-wrap">
				<div class="demo-image__error">
					<div class="block" style="text-align: center;">
						<img :src="imgSrc" alt="" v-if="imgSrc !== '' || imgSrc !== null" style="width: 100%;" />
					</div>
				</div>
			</el-dialog>

			<!-- 下架设置 -->
			<el-dialog title="下架设置" :visible.sync="dialogVisible" width="527px" :show-close="false" center>
				<div class="dialog-wrap">
					<p class="title">详情信息</p>
					<ul class="dialogList">
						<li>
							<span class="left">名称</span>
							<span class="right">安格斯育肥牛</span>
						</li>
						<li>
							<span class="left">木耳等级</span>
							<span class="right">12321</span>
						</li>
						<li>
							<span class="left">木耳规格</span>
							<span class="right">2019-9-21</span>
						</li>
						<li>
							<span class="left">木耳重量</span>
							<span class="right">31</span>
						</li>
						<li>
							<span class="left">木耳单价</span>
							<span class="right">20150</span>
						</li>
						<li>
							<span class="left">木耳库存</span>
							<span class="right">650</span>
						</li>
						<li>
							<span class="left">包装方式</span>
							<span class="right">10个月</span>
						</li>
						<li>
							<span class="left">最低起购</span>
							<span class="right">3</span>
						</li>
						<li>
							<span class="left">产地</span>
							<span class="right er-biao">2</span>
						</li>
						<li>
							<span class="left">添加项目时间</span>
							<span class="right er-biao">2</span>
						</li>
					</ul>
					<span slot="footer" class="dialog-footer">
						<el-button @click="cancelDialog">取 消</el-button>
						<el-button type="primary" @click="keepDialog">下架</el-button>
					</span>
				</div>
			</el-dialog>

			<!--关闭项目设置-->
			<el-dialog title="关闭项目设置" :visible.sync="dialogHide" width="527px" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" center>
				<div class="dialog-wrap">
					<p class="title">详情信息</p>
					<ul class="dialogList">
						<li>
							<span class="left">名称</span>
							<span class="right">{{detailData.productName}}</span>
						</li>
						<li>
							<span class="left">包装方式</span>
							<span class="right">{{detailData.packing}}</span>
						</li>
						<li>
							<span class="left">木耳等级</span>
							<span class="right">{{detailData.level}}</span>
						</li>
						<li>
							<span class="left">最低起购</span>
							<span class="right">{{detailData.minOrderQuantity}}</span>
						</li>
						<li>
							<span class="left">产地</span>
							<span class="right er-biao">{{detailData.addressname}}</span>
						</li>
						<li>
							<span class="left">添加项目时间</span>
							<span class="right er-biao">{{detailData.createTime}}</span>
						</li>
					</ul>
					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogHide = false">取 消</el-button>
						<el-button type="primary" @click="closeDialog">关闭</el-button>
					</span>
				</div>
			</el-dialog>

			<!-- 新增/编辑 -->
			<el-dialog :title="isAddName" :close-on-press-escape="false" :visible.sync="editRowShow" width="800px" :show-close="false" :close-on-click-modal="false" center>
				<div class="edit-wrap">
					<p class="edit-title">黑木耳项目{{isAddName}}</p>
					<div class="edit-row">
						<el-form :rules="rules" ref="ruleForm" label-position="right" label-width="140px" :model="isAddData">
							<el-row :gutter="10">
								<el-col :span="12">
									<div class="edit-innerbox">
										<el-form-item label="名称" prop="productName">
											<el-input v-model="isAddData.productName" maxlength="20" :disabled="editDisable"></el-input>
										</el-form-item>
										<el-form-item label="包装方式" prop="packing">
											<el-select v-model="isAddData.packing" placeholder="请选择" @change="changePackType" :disabled="editDisable">
												<el-option v-for="item in optionsType" :key="item.id" :label="item.packing" :value="item.id">
												</el-option>
											</el-select>
										</el-form-item>
										<el-form-item label="木耳等级" v-if="gradeArr.length !== 0" prop="fungusCategoryId">
											<el-checkbox-group v-model="isAddData.fungusCategoryId" @change="checkGrade">
												<!--<el-checkbox v-for="(item,key,index) in gradeArr" :label="item.id" :key="key" name="checkedGrade" :disabled="item.mark !== '0'" @change="checkGrade(item)">{{item.level}}</el-checkbox>-->
													<el-checkbox v-for="item in gradeArr" :checked="item.mark !== '0'" :key="item.id" :label="item.id" :disabled="item.mark !== '0'">{{item.level}}</el-checkbox>
											</el-checkbox-group>
										</el-form-item>
									</div>
								</el-col>
								<el-col :span="12">
									<div class="edit-innerbox">
										<el-form-item label="产地" prop="originCity" maxlength="20">
											<el-input v-model="isAddData.originCity" :disabled="editDisable"></el-input>
										</el-form-item>
										<el-form-item label="最低起购" prop="minOrderQuantity">
											<el-input type="number" min="1" v-model="isAddData.minOrderQuantity"></el-input>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<div class="upload-box">
								<div class="upload-imgbox">
									<div class="upload-btnbox">
										<div class="dialog-wrap-right">
											<div class="img-box">
												<i class="el-icon-picture-outline" v-if="!isAddData.smallPic"></i>
												<img :src="isAddData.smallPic" alt="" @click="checkImgFn(isAddData.smallPic)" style="width: 100%">
											</div>
											<el-upload class="upload-demo" ref="uploadImg" action="http://cs.umubao.com/ymfarm-1.0-SNAPSHOT/api/common/uploadFile" :on-success="uploadSuccess1" :before-upload="beforeUpload" :before-remove="beforeRemove" multiple name="multipartFile" :limit="1" :on-exceed="limitExceed" :on-remove="onRemove1">
												<el-button size="small" type="success">木耳图片上传</el-button>
												<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
											</el-upload>
										</div>
									</div>
								</div>
								<!--<div class="upload-imgbox">
									<div class="upload-btnbox">
										<div class="dialog-wrap-right">
											<div class="img-box">
												<i class="el-icon-picture-outline" v-if="!isAddData.largePic"></i>
												<img :src="isAddData.largePic" alt="" @click="checkImgFn(isAddData.largePic)" v-if="isAddData.largePic" style="width: 100%">
											</div>
											<el-upload class="upload-demo" ref="uploadImg1" action="http://cs.umubao.com/ymfarm-1.0-SNAPSHOT/api/common/uploadFile" :on-success="uploadSuccess2" :before-upload="beforeUpload" :before-remove="beforeRemove" multiple name="multipartFile" :limit="1" :on-exceed="limitExceed" :on-remove="onRemove2">
												<el-button size="small" type="success">木耳介绍图片上传</el-button>
												<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
											</el-upload>
										</div>
									</div>
								</div>-->
							</div>
						</el-form>
					</div>
					<div class="edit-footer">
						<div slot="footer">
							<el-button @click="cancelEdit('ruleForm')">取 消</el-button>
							<el-button type="primary" @click="keep('ruleForm')">确认</el-button>
						</div>
					</div>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import Storage from "@/utils/storage";
	import BaseFormPage from '@/components/BaseFormPage';
	export default {
		components: {
			BaseFormPage
		},
		inject: ['reload'],
		data() {
			var minCheck = (rule, value, callback)=>{
				if(!value){
					return callback(new Error('请输入最低起购'));
				} else if(value<=0){
					return callback(new Error('最低起购不能小于1'));
				} else {
					callback();
				}
			}
			// 验证是否选了木耳等级
			var fungusIdCheck = (rule, value, callback)=>{
				//this.isAddData.fungusCategoryId    Array  已选中的     this.gradeArr根据mark!=0判断出已选中的，再根绝两个数组比较判断出是否有选中
				if(this.isAddName == '编辑'){
					console.log(this.gradeArr.length == this.isAddData.fungusCategoryId.length)
					if(this.gradeArr.length == this.isAddData.fungusCategoryId.length){
						callback();
						return
					} else {
						let arrId = []
						this.gradeArr.map(item=>{  // 
							if(item.mark != 0){
								arrId.push(item.id)
							}
							return item
						})
						if(this.isAddData.fungusCategoryId.length == arrId.length){
							return callback(new Error('请至少选择一个木耳等级'));
						} else {
							callback();
						}
					}
					
				} else {
					if(this.isAddData.fungusCategoryId.length == 0){
						return callback(new Error('请至少选择一个木耳等级'));
					} else {
						callback();
					}
				}
			}
			return {
				editDisable: false,
				checkedGrade: [],
        		gradeArr: [],
				packing: '', // 新增包装方式
				proWeightUnit: '', // 木耳重量单位
				proPriceUnit: '', // 木耳单价单位
				smallPic: '', // 木耳图片小图
				largePic: '', // 介绍图
				isAddName: '',
				name: '',
				dialogHide: false,
				imgDialogFlag: false,
				imgSrc: '',
				dialogVisible: false, // 审核框
				loadingFlag: false, //表格数据加载状态
				startCreateTime: '',
				endCreateTime: '',
				editRowShow: false,
				startCreateTime: '',
				endCreateTime: '',
				optionsType: [],
				options: [{
					value: '阿克苏·果枝黑木耳',
					label: '阿克苏·果枝黑木耳'
				}],
				value: '',
				payDate: '',
				pageIndex: 1,
				pageSize: 20,
				tableHeight: 200, //表格初始高度
				tableData: [], //表格数据
				pagination: { //分页数据
					loadingFlag: false, //数据加载状态
					currentPage: 1, //当前页
					totalPage: 1, //总页数
					totalNum: 0, //总条数
					firstNum: 0, //分页显示起始值
					endNum: 0 //分页显示结束值
				},
				detailData: {

				},
				postData: {
					id: '',
					mark: 2
				},
				isAddData: {
					packing: '',
					fungusCategoryId: [], // 等级id
					productName: '',    // 木耳名称
					originProvince: '',	//  生产地省
					originCity: '',		//  生产地市
					smallPic: '',		//   	木耳小图
					largePic: '',			//  木耳大图
					introductionPic: '',   // 	介绍图url
					minOrderQuantity: '',  //  最小订货量
					minOrderQuantityUnit: ''
				},
				smallPic: '',
				isEditFlag: false,
				rules: {
					productName: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}],
					originCity: [{
						required: true,
						message: '请输入产地(市)',
						trigger: 'blur'
					}],
					packing: [{
						required: true,
						message: '请输入包装方式',
						trigger: 'change'
					}],
					minOrderQuantity: [{
						validator: minCheck,
						trigger: 'blur',
						required: true,
					}],
					fungusCategoryId: [
			            { validator: fungusIdCheck, type: 'array', required: true }
			        ],
				},
				fungusProductId: '',  //包装方式  编辑传id
				
				searchBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(258) == -1 ? false : true,
				addBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(259) == -1 ? false : true,
				editBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(260) == -1 ? false : true,
				closeBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(261) == -1 ? false : true,
			}
		},
		created() {
			this.getListData();
			this.getOptionsType();  // 获取包装方式
		},
		methods: {
			checkGrade(){ // 选择等级
//				this.isAddData.fungusCategoryId = this.checkedGrade;
				console.log(this.isAddData)
			},
			getOptionsType(){ // 获取包装方式
				this.$http.get('/projectManagement/listFungusCategoryPacking')
				.then(({data})=>{
					console.log(data.records)
					this.optionsType = data.records;
				})
			},
			changeGrade() {
				console.log(this.selectCities)
			},
			resetData() { // 重置
				this.editDisable = false;
				this.isAddData.packing = '';
				this.gradeArr = [];
				this.isAddData.fungusCategoryId = []
				this.isAddData.productName = ''
				this.isAddData.originProvince = ''
				this.isAddData.originCity = ''
				this.isAddData.smallPic = ''
				this.isAddData.largePic = ''
				this.isAddData.introductionPic = ''
				this.isAddData.minOrderQuantity = ''
				this.isAddData.minOrderQuantityUnit = ''
			},
			// 新增
			addFun() {
				this.editRowShow = true;
				this.isAddName = '新增';
				delete this.isAddData.id;
				this.resetData()
			},
			getListData() { // 列表
				this.loadingFlag = true;
				this.pagination.loadingFlag = true;
				let params = {
					name: this.name,
					startCreateTime: this.startCreateTime,
					endCreateTime: this.endCreateTime,
					pgCt: this.pageIndex,
					pgSz: this.pageSize
				}
				if(!this.name) {
					delete params.name
				}
				if(!this.startCreateTime) {
					delete params.startCreateTime
				}
				if(!this.endCreateTime) {
					delete params.endCreateTime
				}
				this.$http.get('/projectManagement/listFungusManagement', params)
					.then((res) => {
						console.log(res)
						if(res.data.records.length > 0) {
							this.pagination.totalPage = res.data.pages;
							this.pagination.totalNum = res.data.total;
							res.data.records.forEach((item, index) => {
								if(item.createTime) {
									item.createTime = item.createTime.replace('T', ' ')
								}
								item.addressname = item.originProvince + item.originCity
								//列表下标
								item.index = index;
								//列表序号
								item.serialNumber = ((this.pageIndex - 1) * this.pageSize) + (index + 1)
								//无数据处理
								//item.orderRefNo = item.orderRefNo || '--'
							})
							this.pagination.firstNum = res.data.records[0].serialNumber
							this.pagination.endNum = res.data.records[res.data.records.length - 1].serialNumber
						} else {
							this.pagination.currentPage = 1
							this.pagination.totalPage = 1
							this.pagination.totalNum = 0
							this.pagination.firstNum = 0
							this.pagination.endNum = 0
						}
						this.tableData = res.data.records;
					})
					.then(() => {
						if(this.tableData.length !== 0) {
							this.tableHeightFn();
						}
						this.loadingFlag = false;
						this.pagination.loadingFlag = false;
					})
			},
			// 确认点击
			keep(formName) {
				// 新增或编辑 根据id

				this.$refs[formName].validate((valid) => {
					if(valid) {
//						 else if(!this.isAddData.largePic) {
//							this.$message.error('请上传木耳介绍图片');
//						} 
						if(!this.isAddData.smallPic) {
							this.$message.error('请上传木耳图片');
						}else {
							if(this.isAddData.packing){
								delete this.isAddData.packing
							}
							this.isAddData.fungusCategoryId = this.isAddData.fungusCategoryId.toString();
							
							this.$http.get('/projectManagement/fungusAddOrUpdate', this.isAddData)
								.then((res) => {
									console.log(res)
									this.editRowShow = false;
									this.$refs.uploadImg.clearFiles();
//									this.$refs.uploadImg1.clearFiles();
									this.$refs[formName].resetFields();
									this.reload()
									this.getListData();
////									if(res.data == 200) {
////										
////									}
								})
						}
					}
				})

			},
			changePackType(value) { // 根据包装方式获取等级数据
				console.log(value)
				this.optionsType.map(e=>{
					if(value == e.id){
						let gradeData = {
							fungusProductId: e.id,
							packing: e.packing
						}
						if(this.isAddName == '新增'){
							delete gradeData.fungusProductId
						}
						this.$http.get('/projectManagement/listFungusCategoryLevel',gradeData)  //根据包装方式去获取木耳等级
						.then(({data})=>{
							this.gradeArr = data.records;
							console.log(this.gradeArr)
						})
					}
					return e
				})
			},
			// 取消编辑
			cancelEdit(formName) {
				this.isAddData.smallPic = '';
				this.isAddData.largePic = '';
				this.$refs.uploadImg.clearFiles();
//				this.$refs.uploadImg1.clearFiles();
				this.editRowShow = false;
				this.$refs[formName].resetFields();
				this.resetData()
				console.log(this.isAddData.packing)
			},
			checkImgFn(src) { // 查看图片
				console.log(src)
				if(src) {
					this.imgSrc = src
				} else {
					this.imgSrc = ''
				}
				this.imgDialogFlag = true
			},
			editRow(row) { // 编辑
				this.editDisable = true;
				console.log(row)
				this.editRowShow = true
				this.isAddData.fungusCategoryId.length = 0
				this.isAddName = '编辑'
				this.isAddData.id = row.id
//				this.isAddData.fungusCategoryId = [row.levelAll] // 木耳等级
				this.isAddData.productName = row.productName
				this.isAddData.originProvince = row.originProvince
				this.isAddData.originCity = row.originCity
				this.isAddData.smallPic = row.smallPic
				this.isAddData.largePic = row.largePic
				this.isAddData.introductionPic = row.introductionPic
				this.isAddData.minOrderQuantity = row.minOrderQuantity
				this.isAddData.minOrderQuantityUnit = row.minOrderQuantityUnit
				this.isAddData.packing = row.packing;
				
				let gradeData = {
					fungusProductId: row.id,
					packing: row.packing
				}
				this.$http.get('/projectManagement/listFungusCategoryLevel',gradeData)  //根据包装方式去获取木耳等级
				.then(({data})=>{
					this.gradeArr = data.records;
					console.log(this.gradeArr)
				})
			},
			changePayDate() {
				if(this.payDate) {
					this.startCreateTime = this.payDate[0]
					this.endCreateTime = this.payDate[1].replace('00:00:00', '23:59:59')
				} else {
					this.startCreateTime = ''
					this.endCreateTime = ''
				}
				this.resetPageIndex()
				this.getListData()
			},
			changeNameType() {
				this.resetPageIndex()
				this.getListData()
			},
			resetPageIndex() { //重置页码
				this.pagination.currentPage = 1;
				this.pageIndex = 1;
			},
			clearPhoneFn() { //清空手机号
				this.resetPageIndex()
				this.getListData()
			},
			clearUserName() { //清空姓名
				this.resetPageIndex()
				this.getListData()
			},
			searchFn() {
				this.resetPageIndex()
				this.getListData()
			},
			cFirstPageFn(pageNum) { //首页
				this.pageIndex = pageNum;
				this.getListData()
			},
			cLastPageFn(pageNum) { //尾页
				this.pageIndex = pageNum;
				this.getListData()
			},
			cJumpPageFn(pageNum) { //页码跳转
				this.pageIndex = pageNum;
				this.getListData()
			},
			cPreFn(pageNum) { //上一页
				this.pageIndex = pageNum;
				this.getListData()
			},
			cNextFn(pageNum) { //下一页
				this.pageIndex = pageNum;
				this.getListData()
			},
			resetParams() { //重置参数

			},
			cRefreshFn() { //刷新
				this.reload()
			},
			checkResaleInfoFn(item) { // 详情点击
				console.log(item)
				this.detailData = item;
				this.dialogHide = true;
				this.postData.id = item.id;
			},
			selectState(value) {
				console.log(value)
				this.buyData.state = value;
			},
			showDialog() {
				this.dialogVisible = true;
			},
			cancelDialog() {
				this.dialogVisible = false;
			},
			closeDialog() { // 关闭项目设置
				console.log(this.postData)
				this.$http.get('/projectManagement/fungusOut', this.postData)
					.then((res) => {
						console.log(res)
						if(res.data == 200) {
							this.dialogHide = false;
							this.getListData();
						}
					})
			},
			keepDialog() {

			},
			tableHeightFn() { //表格高度
				let tableDataLength = this.tableData.length;
				let minHeight = tableDataLength == 0 ? 0 : 80; //根据需求距离底部的高度
				this.$nextTick(function() {
					//window.innerHeight:浏览器的可用高度
					//this.$refs.table.$el.offsetTop：表格距离浏览器的高度
					this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - minHeight;
					if(this.tableData.length <= 0) {
						this.tableHeight = '60vh'
					}

					// 通过捕获系统的onresize事件触发去改变原有的高度
					let self = this;
					window.onresize = function() {
						self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - minHeight;
						self.tableHeight = self.tableHeight < 200 ? 200 : self.tableHeight;
					}
				})
			},
			limitExceed(files, fileList) { //图片个数限制
				this.$message.warning(`当前限制上传 1 个文件，本次选择了 ${files.length} 个文件，若需要更改图片，请删除已上传文件`);
			},
			beforeUpload(file) { //图片格式大小限制
				const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
				const isLt2M = file.size / 1024 / 1024 < 2;

				if(!isJPG) {
					this.$message.error('上传图片只能是 jpg/png 格式!');
				}
				if(!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			beforeRemove(file, fileList) { //移除已上传图片
				return this.$confirm(`确定移除 ${ file.name }？`);
			},
			// 小图
			onRemove1(img) { //移除图片成功
				this.isAddData.smallPic = "";
			},
			uploadSuccess1(res, file) { //图片上传成功
				console.log(res)
				this.isAddData.smallPic = res.data.url;
			},
			//  介绍图
			onRemove2(img) { //移除图片成功
				this.isAddData.largePic = "";
			},
			uploadSuccess2(res, file) { //图片上传成功
				console.log(res)
				this.isAddData.largePic = res.data.url;
			},

		},

	}
</script>
<style type="text/css">
	.resaleAudiList .dialog-wrap .el-input__inner,
	.resaleAudiList .dialog-wrap .el-textarea__inner {
		border-color: #fff !important;
	}
	
	.resaleAudiList .dialog-wrap .el-form-item {
		margin-bottom: 0;
	}
	
	.resaleAudiList .dialog-wrap .el-form-item__error {
		z-index: 9;
	}
	
	.resaleAudiList .dialog-wrap .el-form-item__error {
		z-index: 9;
	}
	
	.ccc .cell {
		display: flex;
		justify-content: space-between;
		padding: 0 20px;
	}
</style>
<style lang="scss" scoped>
	@import '@/assets/css/dialogDetail.scss';
	.edit-wrap {
		padding: 0 10px;
		.edit-row {
			margin-bottom: 40px;
		}
		.edit-footer {
			display: flex;
			justify-content: space-around;
			.el-button {
				margin: 20px;
			}
		}
	}
	
	.upload-box {
		display: flex;
		.upload-imgbox {
			margin-right: 40px;
			text-align: center;
			.upload-top {
				width: 240px;
				height: 147px;
				border: 1px solid #D0CFCF;
				margin-bottom: 24px;
				.el-icon-upload {
					font-size: 50px;
					margin-top: 40px;
				}
			}
			.upload-btnbox {
				.upload-btn {
					display: inline;
					.el-button {
						background-color: #35CC9E;
						border: 1px solid #35CC9E;
					}
				}
			}
		}
	}
	
	.last-oli {
		display: inherit;
		padding-left: 74px;
		position: relative;
		.last-ospan {
			position: absolute;
			left: 0;
			top: 0;
		}
		.last-span2 {
			position: absolute;
			left: 145px;
			top: 0;
		}
	}
	/* 耳标弹出框 */
	
	.erbiao-content {
		padding: 0 20px;
		.erbiao-subtitle {
			color: #344047;
			margin-bottom: 16px;
		}
		.erbiao-info {
			color: #5D6164;
			margin-bottom: 40px;
			padding: 0 30px;
		}
		.dialog-btn {
			text-align: center;
		}
	}
	
	.dialog-wrap-right {
		width: 224px;
		text-align: center;
		.img-box {
			width: 224px;
			height: 138px;
			border: 1px solid #D0CFCF;
			img {
				width: 100%;
				height: 100%;
			}
			i {
				font-size: 44px;
				color: #D0CFCF;
				line-height: 130px;
			}
		}
		button {
			margin-top: 24px;
		}
	}
</style>